<template>
  <div class="connect">
    <div class="connect_box">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item :label="$t('public.operateTime')">
          <el-date-picker
             value-format="yyyy-MM-dd"
             v-model="formInline.rechargeTime"
             @change = "timeChange"
             type="date"
            :placeholder="$t('public.operateTime')">
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('Order_module.corporate_name')">
          <el-input v-model="formInline.userName" :placeholder="$t('Order_module.corporate_name')"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="searchLoading" @click="search" >{{$t('public.query')}}</el-button>
          <el-button type="primary" :loading="ExcelLoadng" @click="Excel" >{{$t('Order_module.export_list')}}</el-button>
        </el-form-item>
      </el-form>


        <el-table id="excel_table" :data="tableData" border stripe style="width: 100%" @selection-change="handleSelectionChange">
          <!-- <el-table-column align="center" type="selection" width="55"> </el-table-column> -->
          <el-table-column align="center" prop="userName" :label="$t('Order_module.corporate_name')"  min-width="180"> </el-table-column>
          <el-table-column align="center" prop="customer" :label="$t('public.operator')"  min-width="120"> </el-table-column>
          <el-table-column align="center" prop="rechargeTime" :label="$t('public.operateTime')"  min-width="200"> </el-table-column>

          <el-table-column align="center" prop="beforeRecharge" :label="$t('Order_module.Balance_before_recharge')"  min-width="100"> </el-table-column>
          <el-table-column align="center" prop="rechargeAmount" :label="$t('Order_module.Recharge_amount')"  min-width="100"> </el-table-column>
          <el-table-column align="center" prop="afterRecharge" :label="$t('Order_module.Amount_after_recharge')"  min-width="100"> </el-table-column>

          <el-table-column align="center" prop="beforeRechargeOrder" :label="$t('Order_module. Balance_before_recharge_order')"  min-width="100"> </el-table-column>
          <el-table-column align="center" prop="rechargeOrderNum" :label="$t('Order_module.Recharge_amount_order')"  min-width="100"> </el-table-column>
          <el-table-column align="center" prop="afterRechargeOrder" :label="$t('Order_module.Amount_after_recharge_order')"  min-width="100"> </el-table-column>
          <el-table-column align="center" prop="remark" :label="$t('public.notes')"  min-width="180"> </el-table-column>

        </el-table>
        <div style="margin-top: 20px;"></div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 50, 200, 400]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
    </div>
  </div>
</template>

<script>
  import {
    recharge_list,
    recharge_export
  } from '@/api/wqzApi'
  export default {
    components: {},
    data() {
      return {
        ExcelLoadng:false,
        searchLoading:false,
        value:null,
        options:[

        ],
        total:0,
        limit:10,
        page:1,
        tableData:[

        ],
        formInline:{
          rechargeTime:'',
          userName:'',

        }
      }
    },

    created() {
    },
    mounted() {
      this.getList()
    },
    destroyed() {

    },
    methods: {
      search(){
        this.page = 1
        this.searchLoading = true
        this.getList()
      },
      timeChange(e){

      },
      Excel(){
        var formData = new FormData()
        formData.append('rechargeTime', this.formInline.rechargeTime?this.formInline.rechargeTime:'')
        formData.append('userName', this.formInline.userName)
        this.ExcelLoadng = true
        this.$export_down(recharge_export(),formData , this.$t('route.Recharge_Record')).then(res=>{
          this.ExcelLoadng = false
        })
       // this.$Excel(this.tableData , 'excel_table' , '')
      },
      getList(){
        var data ={
          page:Number(this.page),
          limit:Number(this.limit),
          ...this.formInline
        }
        recharge_list(data).then(res=>{
          this.tableData = res.page.list
          this.total = res.page.totalCount
          this.searchLoading = false
        }).catch(err=>{
          this.searchLoading = false
        })
      },
      handleSelectionChange(e){
        console.log(e)
      },
      handleSizeChange(e){
        console.log(e)
        this.limit = e
        this.getList()
      },
      handleCurrentChange(e){
        this.page = e
        this.getList()
      }
    }
  }
</script>

<style scoped>
  @import url('Recharge_Record.css');
</style>
